<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/about.css">
    <link rel="stylesheet" href="../css/news.css">
    <link rel="stylesheet" href="../css/contact.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <main>
            <h1><img src="../images/index/logo.png" alt=""></h1>
            <nav>
                <a href="index.html">首页</a>
                <a href="about.html">关于我们</a>
                <a href="product.html">产品介绍</a>
                <a href="team.html">我们团队</a>
                <a class="active" href="contact.html"> 联系我们</a>
            </nav>
        </main>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="picture">
            <img src="../images/contact/banner.png" alt="">
            <div class="text">
                <p>Contact</p>
                <p><i>联系我们</i> <em>Us</em></p>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <main>
                <!-- 内容头部 -->
                <div class="coffee_header">
                    <div class="coffee_name">
                        <h6>
                            <p>联系我们</p>
                            <p>Contact Us</p>
                        </h6>
                    </div>
                    <!-- 当前地址 -->
                    <div class="coffee_site">
                        <i>当前位置></i>
                        <em>首页></em>
                        <i>联系我们></i>
                    </div>
                </div>

                <div class="map">
                    <!DOCTYPE html
                        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
                        <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
                        <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
                        <title>百度地图API自定义地图</title>
                        <!--引用百度地图API-->
                        <style type="text/css">
                            html,
                            body {
                                margin: 0;
                                padding: 0;
                            }

                            .iw_poi_title {
                                color: #CC5522;
                                font-size: 14px;
                                font-weight: bold;
                                overflow: hidden;
                                padding-right: 13px;
                                white-space: nowrap
                            }

                            .iw_poi_content {
                                font: 12px arial, sans-serif;
                                overflow: visible;
                                padding-top: 4px;
                                white-space: -moz-pre-wrap;
                                word-wrap: break-word;
                            }
                        </style>
                        <script type="text/javascript"
                            src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
                    </head>

                    <body>
                        <!--百度地图容器-->
                        <div style="width:1000px;height:335px;border:#ccc solid 1px;" id="dituContent"></div>
                    </body>
                    <script type="text/javascript">
                        //创建和初始化地图函数：
                        function initMap() {
                            createMap();//创建地图
                            setMapEvent();//设置地图事件
                            addMapControl();//向地图添加控件
                            addMarker();//向地图中添加marker
                        }

                        //创建地图函数：
                        function createMap() {
                            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                            var point = new BMap.Point(106.515937, 29.542697);//定义一个中心点坐标
                            map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中
                            window.map = map;//将map变量存储在全局
                        }

                        //地图事件设置函数：
                        function setMapEvent() {
                            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                            map.enableKeyboard();//启用键盘上下左右键移动地图
                        }

                        //地图控件添加函数：
                        function addMapControl() {
                            //向地图中添加缩放控件
                            var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
                            map.addControl(ctrl_nav);
                            //向地图中添加缩略图控件
                            var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
                            map.addControl(ctrl_ove);
                            //向地图中添加比例尺控件
                            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
                            map.addControl(ctrl_sca);
                        }

                        //标注点数组
                        var markerArr = [{ title: "咖啡", content: "我的备注", point: "106.519167|29.541386", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }
                        ];
                        //创建marker
                        function addMarker() {
                            for (var i = 0; i < markerArr.length; i++) {
                                var json = markerArr[i];
                                var p0 = json.point.split("|")[0];
                                var p1 = json.point.split("|")[1];
                                var point = new BMap.Point(p0, p1);
                                var iconImg = createIcon(json.icon);
                                var marker = new BMap.Marker(point, { icon: iconImg });
                                var iw = createInfoWindow(i);
                                var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
                                marker.setLabel(label);
                                map.addOverlay(marker);
                                label.setStyle({
                                    borderColor: "#808080",
                                    color: "#333",
                                    cursor: "pointer"
                                });

                                (function () {
                                    var index = i;
                                    var _iw = createInfoWindow(i);
                                    var _marker = marker;
                                    _marker.addEventListener("click", function () {
                                        this.openInfoWindow(_iw);
                                    });
                                    _iw.addEventListener("open", function () {
                                        _marker.getLabel().hide();
                                    })
                                    _iw.addEventListener("close", function () {
                                        _marker.getLabel().show();
                                    })
                                    label.addEventListener("click", function () {
                                        _marker.openInfoWindow(_iw);
                                    })
                                    if (!!json.isOpen) {
                                        label.hide();
                                        _marker.openInfoWindow(_iw);
                                    }
                                })()
                            }
                        }
                        //创建InfoWindow
                        function createInfoWindow(i) {
                            var json = markerArr[i];
                            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
                            return iw;
                        }
                        //创建一个Icon
                        function createIcon(json) {
                            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
                            return icon;
                        }

                        initMap();//创建和初始化地图
                    </script>

                    </html>
                </div>
                <div class="line">
                    <div class="mini">
                        <div class="icon">
                            <i class="iconfont">&#xe632;</i>
                        </div>
                        <div class="rigth">
                            <p>咨询热线</p>
                            <p>Information Hotline</p>
                            <p>重庆：+86 023-867-7848</p>
                            <p>(09：30~18：30 北京时间)</p>
                        </div>
                    </div>
                    <div class="mini">
                        <div class="icon">
                            <i class="iconfont">&#xe629;</i>
                        </div>
                        <div class="rigth">
                            <p>公司地址</p>
                            <p>Company address</p>
                            <p>地址：重庆大坪龙湖时代天街3号写字楼2407室</p>
                            <p>(09：30~18：30 北京时间)</p>
                        </div>
                    </div>
                    <div class="mini">
                        <div class="icon">
                            <i class="iconfont">&#xe600;</i>
                        </div>
                        <div class="rigth">
                            <p>公司邮箱</p>
                            <p>E-mail</p>
                            <p>邮箱：info@haitouglobal.com</p>
                            <p>(09：30~18：30 北京时间)</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <!-- 底部 -->
        <footer>
            <main>
                <p>Copyright © 重庆duzu有限公司 | duzu备案号 33010602001878 号 版权所有：重庆戈登有限公司</p>
                <h5><img src="../images/index/logo2.png" alt=""></h5>
            </main>
        </footer>

</body>

</html>